<template>
  <el-form ref="fltForm" label-width="130px" :model="FLT_INFO" size="mini">
    <el-row>
      <el-col :span="12">
        <el-form-item label="堆场码头标志：" prop="tmnTyflag" :rules="rules.tmnTyflag">
          <el-select :disabled="disabled" v-model="FLT_INFO.tmnTyflag" style="width: 100%">
            <el-option
              v-for="(item, index) in tyFlag"
              :key="index"
              :value="item.rvLowValue"
              :label="item.rvCmeaning">
              <span style="float: left;font-size: 12px;">{{ item.rvLowValue }}</span>
              <span style="float: right; color: #8492a6;font-size: 12px;">{{ item.rvCmeaning }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="中文名称：" prop="tmnChnname" :rules="rules.tmnChnname">
          <el-input :disabled="disabled" maxlength="32" style="width: 100%" v-model="FLT_INFO.tmnChnname"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="英文名称：" prop="tmnEgsname" :rules="rules.tmnEgsname">
          <el-input :disabled="disabled" maxlength="32" @input="accountInput" style="width: 100%" v-model="FLT_INFO.tmnEgsname"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="简体中文：" prop="tmnShrchn" :rules="rules.tmnShrchn">
          <el-input :disabled="disabled" maxlength="32" style="width: 100%" v-model="FLT_INFO.tmnShrchn"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="国家：" prop="tmnCoutry" :rules="rules.tmnCoutry">
          <el-select :disabled="disabled" v-model="FLT_INFO.tmnCoutry" style="width: 100%"
            @change="changeProvince">
            <el-option v-for="(item, index) in nationList"
              :key="index"
              :label="item.CTY_CNAME"
              :value="item.CTY_CD"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="省：" prop="tmnPrvoCode" :rules="rules.tmnPrvoCode">
          <el-select :disabled="disabled" v-model="FLT_INFO.tmnPrvoCode" style="width: 100%"
            @change="changeCity">
            <el-option v-for="(item, index) in provinceList"
              :key="index"
              :label="item.PRV_CHNNAME"
              :value="item.PRV_CODE"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="市：" prop="tmnCtyeCode" :rules="rules.tmnCtyeCode">
          <el-select :disabled="disabled" v-model="FLT_INFO.tmnCtyeCode" style="width: 100%" @change="changeArea">
            <el-option v-for="(item, index) in citiesList"
              :key="index"
              :label="item.CTYE_CHNNAME"
              :value="item.CTYE_CODE"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="区：" prop="tmnCtyCode" :rules="rules.tmnCtyCode">
          <el-select :disabled="disabled" v-model="FLT_INFO.tmnCtyCode" style="width: 100%">
            <el-option v-for="(item, index) in areaList"
              :key="index"
              :label="item.ctyChnname"
              :value="item.ctyCode"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="联系人：" prop="tmnContacts">
          <el-input :disabled="disabled" maxlength="15" style="width: 100%" v-model="FLT_INFO.tmnContacts"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系电话：" prop="tmnPhone">
          <el-input :disabled="disabled" maxlength="15" style="width: 100%" v-model="FLT_INFO.tmnPhone"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="所属港口：" prop="tmnPorts" :rules="rules.tmnPorts">
          <el-select :disabled="disabled" clearable v-model="FLT_INFO.tmnPorts" style="width: 100%">
            <el-option
              v-for="(item, index) in ports"
              :key="index"
              :value="item.potCd"
              :label="item.potCname">
              <span style="float: left;font-size: 12px;">{{ item.potCd }}</span>
              <span style="float: right; color: #8492a6;font-size: 12px;">{{ item.potCname }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="坐标：">
          <el-input :disabled="disabled" maxlength="12" style="width: 30%" v-model="FLT_INFO.tmnX"></el-input>
          <el-input :disabled="disabled" maxlength="12" style="width: 30%; margin-left: 10px;" v-model="FLT_INFO.tmnY"></el-input>
          <el-button :disabled="disabled" @click="showDialog = true" type="text">地图定位</el-button>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-form-item label="地址：" prop="tmnAddress" :rules="rules.tmnAddress">
          <el-input :disabled="disabled" style="width: 100%;" v-model="FLT_INFO.tmnAddress"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="备注：" prop="tmnRemark" :rules="rules.tmnRemark">
          <el-input :disabled="disabled" maxlength="128" style="width: 100%" v-model="FLT_INFO.tmnRemark"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row class="el-dialog__footer">
      <el-col :span="24">
        <el-form-item>
          <el-button @click="close">关闭</el-button>
          <el-button v-if="!disabled" @click="save" type="primary">保存</el-button>
        </el-form-item>
      </el-col>
    </el-row>

    <el-dialog
      title="地图定位"
      append-to-body
      v-el-drag-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-if="showDialog"
      :visible.sync="showDialog">
      <baidu-map-pop @choose="choose"></baidu-map-pop>

      <el-row class="el-dialog__footer">
        <el-col :span="24">
          <el-form-item>
            <el-button @click="showDialog = false">取消</el-button>
            <el-button @click="saveAddress" type="primary">确定</el-button>
          </el-form-item>
        </el-col>
      </el-row>

    </el-dialog>
  </el-form>
</template>

<script>
import {
  getNationService,
  getProvinceService,
  getCityService,
  getSelectDown,
  getPortSelectService,
  getAreaService
} from '@/request/api'
import BaiduMapPop from '@/components/baidumap'

export default {
  name: 'roleform',
  components: {
    BaiduMapPop
  },
  props: {
    flt_info: {
      type: Object,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showDialog: false,
      tempLocation: null, // 当前选中的位置的地址
      FLT_INFO: this.flt_info,
      fltType: [],
      tyFlag: [], // 堆场标志
      ports: [], // 所属港口
      nationList: [], // 国家
      provinceList: [], // 省
      citiesList: [], // 市
      areaList: [], // 区
      provinceCode: '', // 省代码
    }
  },
  watch: {
    flt_info() {
      this.FLT_INFO = this.flt_info
    }
  },
  computed: {
    rules() {
      return {
        tmnTyflag: [
          { required: true, message: '请选择堆场码头标志', trigger: 'change' }
        ],
        tmnChnname: [
          { required: true, message: '请输入中文名称', trigger: 'blur' }
        ],
        tmnCoutry: [
          { required: true, message: '请选择国家', trigger: 'change' }
        ],
        tmnPrvoCode: [
          { required: true, message: '请选择省', trigger: 'change' }
        ],
        tmnCtyeCode: [
          { required: true, message: '请选择市', trigger: 'change' }
        ],
        tmnCtyCode: [
          { required: true, message: '请选择区', trigger: 'change' }
        ],
        tmnAddress: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
        tmnPorts: [
          { required: true, message: '请选择所属港口', trigger: 'blur' }
        ],
      }
    },
  },
  methods: {
    // 校验  输入框  不输入汉字
    accountInput(val) {
      let codeReg = new RegExp('[A-Za-z0-9]+') //正则 英文+数字
      let len=val.length
      let str = ''
      for(var i=0;i<len;i++){
        if(codeReg.test(val[i])){
          str+=val[i]
        }
      }
      this.FLT_INFO.tmnEgsname = str
    },
    // 点击确定保存地址
    saveAddress () {
      if (this.tempLocation) {
        this.FLT_INFO.tmnX = this.tempLocation.point.lng
        this.FLT_INFO.tmnY = this.tempLocation.point.lat
        this.FLT_INFO.tmnAddress = this.tempLocation.address
      }
      this.tempLocation = null
      this.showDialog = false
    },
    // 地图选点回调
    choose(location) {
      this.tempLocation = location
    },
    close() {
      // 关闭时清楚验证信息
      this.$emit('close')
    },
    save() {
      this.$refs['fltForm'].validate(valid => {
        if (valid) {
          this.$emit('save', this.FLT_INFO)
        }
      })
    },
    getTYFlag () {
      // 堆场标志
      getSelectDown({rvDomain:'堆场标志'}).then(res => {
        if(res.success == 1) {
          this.tyFlag = res.data.FTKJWLHYPT
        }
      })
      // 所属港口
      getPortSelectService().then(res => {
        console.log(res)
        if(res.success == 1) {
          this.ports = res.data.FTKJWLHYPT
        }
      })
      // 国家
      getNationService().then(res => {
        if(res.success == 1) {
          this.nationList = res.data
        }
      })
    },

    // 根据国家查省
    changeProvince (uuid) {
      if(uuid) {
        getProvinceService({ctycd: uuid}).then(res => {
          if(res.success ==1) {
            this.provinceList = res.data
          }
        })
      }else {
        this.FLT_INFO['tmnPrvoCode'] = ''
        this.FLT_INFO['tmnCtyeCode'] = ''
        this.FLT_INFO['tmnCtyCode'] = ''// 清空 省市区
        this.provinceCode = ''
      }
    },
    // 根据省查市区
    changeCity(val) {
      this.provinceCode = val
      getCityService({pvCode: val}).then(res => {
        if(res.success ==1) {
          this.citiesList = res.data
        }
      })
    },
    // 根据省市查区县
    changeArea(val) {
      getAreaService({prvCode: this.provinceCode,ctyeCode: val}).then(res => {
        if(res.success == 1) {
          this.areaList = res.data.FTKJWLHYPT
        }
      })
    }
  },
  mounted() {
    this.getTYFlag() // 堆场码头标志 下拉框数据
    this.$refs.fltForm.clearValidate()
    console.log(this.flt_info)
    if(this.flt_info.tmnCoutryName) {
      this.changeProvince(this.flt_info.tmnCoutry)
      this.changeCity(this.flt_info.tmnPrvoCode)
      this.changeArea(this.flt_info.tmnCtyeCode)
    }
  }
}
</script>

<style lang="scss" scoped></style>
